<template>
	<view class="content">
		<view class="left" @click="$emit('clicksearch','left')">{{title}}</view>
		<view class="inputs" @click="$emit('clicksearch','search')">
			<input type="text" value="" :placeholder="searchText" v-model="inputValue" :disabled="disabled" class="input" />

			<uni-icons type="clear" size="25" color="#adadad" class="clear-ico" @click="clickclear" v-if="clearShow"></uni-icons>
		</view>

		<view class="right" @click="$emit('clicksearch','right')"><uni-icons type="scan" size="24" color="#666666"></uni-icons></view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: { uniIcons },
	data() {
		return {
			inputValue: '',
			clearShow: false
		};
	},
	props:['title','searchText','disabled'],
	watch: {
		inputValue(newVal, oldVal) {
			// console.log(newVal);
			if (newVal.trim().length >= 1) {
				this.clearShow = true;
				this.fangdou(newVal);
			} else {
				this.clearShow = false;
				uni.hideKeyboard()
			}
		}
	},
	methods: {
		clickclear() {
			this.inputValue = '';
			uni.hideKeyboard()
		},
		//搜索防抖
		fangdou(newValue) {
			let value = newValue;
			if (this.timer !== null) {
				clearTimeout(this.timer);
			}
			//func 后this指向变成windows  所以定义个变量存下 Vue 对象 this
			let that = this;
			this.timer = setTimeout(function() {
				that.request(value);
			}, 1000);
		},
		//发送请求
		request(value) {
			// 发送请求
			console.log(value);
		}
	}
};
</script>

<style>
.content {
	width: 100vw;
	height: 100rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	line-height: 100rpx;

	padding: 20rpx;
	 
	box-sizing: border-box;
}

.content .left {
	/* background-color: red; */
	/* flex: 1; */
	font-weight: 900;
}
.content .inputs {
	position: relative;
	/* border: 1px solid red; */
	flex: 1;
	height: 60rpx;
	margin: 0 20rpx;
	background-color: #f7f7f7;
	border-radius: 30px;
	
	color: #999999;
	padding-left: 70rpx;
	padding-right: 40rpx;
	text-align: left;
}

.content .inputs .input {
	height: 100%;
	font-size: 35rpx;
}
.content .input::after {
	content: '';
	position: absolute;
	left: 23rpx;
	top: 14rpx;
	width: 35rpx;
	height: 35rpx;
	background-image: url(../../static/icon/search.png);
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.6;
}
.content .inputs .clear-ico {
	position: absolute;
	right: 20rpx;
	top: -12rpx;
}

.content .right {
	margin-top: 12rpx;
	 
	/* background-color: #007AFF; */
	
}
</style>
